<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form (ngSubmit)="save()" fxLayout="column" #accountForm="ngForm">
  <div *ngIf="inheritMode" fxLayout="column" class="gv-form-section">
    <div fxLayout="column">
        <mat-slide-toggle
        (change)="enableInheritMode($event)"
        [checked]="isInherited()" [disabled]="readonly">
        Inherit configuration
      </mat-slide-toggle>
      <mat-hint style="font-size: 75%;">Inherit User Accounts settings from the security domain.</mat-hint>
    </div>
  </div>

  <div *ngIf="!inheritMode || !accountSettings.inherited">
    <div class="gv-form-section">
      <div class="gv-form-section-title">
        <h5>Login</h5>
        <mat-divider></mat-divider>
      </div>
      <div>
        <div fxLayout="column">
          <mat-slide-toggle
            (change)="enableBrutForceAuthenticationDetection($event)"
            [checked]="isBrutForceAuthenticationEnabled()" [disabled]="readonly">
            Brute Force Detection
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">Prevent brute force authentication attempts.</mat-hint>
        </div>
        <div fxLayout="row">
          <mat-form-field appearance="outline" floatLabel="always">
            <input matInput type="number" placeholder="Max Login Attempts" name="maxLoginAttempts" [(ngModel)]="accountSettings.maxLoginAttempts" (ngModelChange)="updateModel()" [disabled]="!isBrutForceAuthenticationEnabled()" required>
            <mat-hint>Max login failures after which the account will be blocked.</mat-hint>
          </mat-form-field>
        </div>
        <div fxLayout="row">
          <mat-form-field appearance="outline" floatLabel="always">
            <input matInput type="number" placeholder="Login Attempts Reset Time" name="loginAttemptsResetTime" [(ngModel)]="accountSettings.loginAttemptsResetTime" (ngModelChange)="updateModel()" [disabled]="!isBrutForceAuthenticationEnabled()" required>
            <mat-hint>Time after which the login attempts will be reset if max attempts has not been reached.</mat-hint>
          </mat-form-field>
          <mat-form-field fxFlex style="margin-left: 20px;" appearance="outline" floatLabel="always">
            <mat-select placeholder="Unit time" name="loginAttemptsResetTimeUnitTime" [(ngModel)]="accountSettings.loginAttemptsResetTimeUnitTime" (ngModelChange)="updateModel()" [disabled]="!isBrutForceAuthenticationEnabled()" required>
              <mat-option value="seconds">SECONDS</mat-option>
              <mat-option value="minutes">MINUTES</mat-option>
              <mat-option value="hours">HOURS</mat-option>
              <mat-option value="days">DAYS</mat-option>
              <mat-option value="weeks">WEEKS</mat-option>
              <mat-option value="months">MONTHS</mat-option>
              <mat-option value="years">YEARS</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div fxLayout="row">
          <mat-form-field fxFlex="85" appearance="outline" floatLabel="always">
            <input matInput type="number" placeholder="Account Blocked Duration" name="accountBlockedDuration" [(ngModel)]="accountSettings.accountBlockedDuration" (ngModelChange)="updateModel()" [disabled]="!isBrutForceAuthenticationEnabled()" required>
            <mat-hint>Amount of time while the user will be blocked.</mat-hint>
          </mat-form-field>
          <mat-form-field fxFlex style="margin-left: 20px;" appearance="outline" floatLabel="always">
            <mat-select placeholder="Unit time" name="accountBlockedDurationUnitTime" [(ngModel)]="accountSettings.accountBlockedDurationUnitTime" (ngModelChange)="updateModel()" [disabled]="!isBrutForceAuthenticationEnabled()" required>
              <mat-option value="seconds">SECONDS</mat-option>
              <mat-option value="minutes">MINUTES</mat-option>
              <mat-option value="hours">HOURS</mat-option>
              <mat-option value="days">DAYS</mat-option>
              <mat-option value="weeks">WEEKS</mat-option>
              <mat-option value="months">MONTHS</mat-option>
              <mat-option value="years">YEARS</mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div fxLayout="column" style="margin-top: 10px;">
          <mat-slide-toggle
            (change)="enableSendRecoverAccountEmail($event)"
            [checked]="isSendRecoverAccountEmailEnabled()" [disabled]="readonly">
            Send account recovery email
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">Send an email if user account has been blocked.</mat-hint>
        </div>
      </div>
    </div>

    <div class="gv-form-section">
      <div class="gv-form-section-title">
        <h5>User registration</h5>
        <mat-divider></mat-divider>
      </div>
      <div>
        <div fxLayout="column">
          <mat-form-field appearance="outline">
            <mat-select placeholder="Identity provider" name="defaultIdentityProviderForRegistration" [(ngModel)]="accountSettings.defaultIdentityProviderForRegistration" (ngModelChange)="updateModel()">
              <mat-option>None</mat-option>
              <mat-option *ngFor="let userProvider of userProviders" [value]="userProvider.id">{{userProvider.name}}</mat-option>
            </mat-select>
            <mat-hint>Default identity provider for user registration. The user will be stored in the selected identity provider instead of the default one.</mat-hint>
          </mat-form-field>
        </div>
        <div fxLayout="column">
          <mat-slide-toggle
            (change)="enableDynamicUserRegistration($event)"
            [checked]="isDynamicUserRegistrationEnabled()">
            Dynamic user registration
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">Upon successful pre-registration, returns the newly-created User with location of the User Registration Endpoint to finalize the account. No email will be sent to the User (works only on the management side with the POST /users endpoint).</mat-hint>
        </div>
        <div fxLayout="column" style="margin-top: 10px;">
          <mat-slide-toggle
            (change)="enableCompleteRegistration($event)"
            [checked]="isCompleteRegistrationEnabled()" [disabled]="readonly">
            Complete user registration (reset password)
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">If a user renewed his password without completing his registration, finalize the account. The default behavior is to display an error to the user.</mat-hint>
        </div>
        <div fxLayout="column" style="margin-top: 10px;">
          <mat-slide-toggle
            (change)="enableAutoLoginAfterRegistration($event)"
            [checked]="isAutoLoginAfterRegistrationEnabled()" [disabled]="readonly">
            Auto login after user registration
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">Automatically login user after registration process.</mat-hint>
        </div>
        <div fxLayout="column">
          <mat-form-field appearance="outline" floatLabel="always">
            <input matInput placeholder="Registration redirect URI" name="autoLoginRegistration" [(ngModel)]="accountSettings.redirectUriAfterRegistration" (ngModelChange)="updateModel()" [disabled]="readonly">
            <mat-hint>After complete its registration the user can be redirected to the specified URL. The default behavior is to display the registration confirmation page to the user.</mat-hint>
          </mat-form-field>
        </div>
      </div>
    </div>

    <div class="gv-form-section">
      <div class="gv-form-section-title">
        <h5>Reset password</h5>
        <mat-divider></mat-divider>
      </div>
      <div>
        <div fxLayout="column">
          <mat-slide-toggle
            (change)="enableDeletePasswordlessDevicesAfterResetPassword($event)"
            [checked]="isDeletePasswordlessDevicesAfterResetPasswordEnabled()" [disabled]="readonly">
            Delete passwordless devices
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">Automatically delete passswordless devices after reset password process.</mat-hint>
        </div>
        <div fxLayout="column" style="margin-top: 10px;">
          <mat-slide-toggle
            (change)="enableAutoLoginAfterResetPassword($event)"
            [checked]="isAutoLoginAfterResetPasswordEnabled()" [disabled]="readonly">
            Auto login after reset password
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">Automatically login user after reset password process.</mat-hint>
        </div>
        <div fxLayout="column">
          <mat-form-field appearance="outline" floatLabel="always">
            <input matInput placeholder="Reset password redirect URI" name="autoLoginResetPassword" [(ngModel)]="accountSettings.redirectUriAfterResetPassword" (ngModelChange)="updateModel()" [disabled]="readonly">
            <mat-hint>After reset its password the user can be redirected to the specified URL. The default behavior is to display the reset password page to the user.</mat-hint>
          </mat-form-field>
        </div>
      </div>
      <div fxLayout="column">
        <mat-slide-toggle
          (change)="enableResetPasswordCustomForm($event)"
          [checked]="isResetPasswordCustomFormEnabled()" [disabled]="readonly">
          Allow Forgot Password form with custom fields
        </mat-slide-toggle>
        <mat-hint style="font-size: 75%;">Allow to define a custom Forgot Password form.</mat-hint>
      </div>

      <div fxLayout="column" *ngIf="isResetPasswordCustomFormEnabled()" style="margin-top: 10px;">
        <div fxLayout="row">
          <mat-form-field appearance="outline" floatLabel="always">
            <mat-select placeholder="Field key" name="fieldKey" [(ngModel)]="newField.key" (selectionChange)="onFieldSelected($event)">
              <mat-option *ngFor="let field of availableFields" [disabled]="isFieldSelected(field.key)" [value]="field.key">{{field.label}}</mat-option>
            </mat-select>
            <mat-hint>Field identifier</mat-hint>
          </mat-form-field>
          <mat-form-field appearance="outline" floatLabel="always" style="margin-left: 20px;" >
            <input matInput placeholder="Field Label" name="fieldLabel" [(ngModel)]="newField.label">
            <mat-hint>Label used when the form is rendered.</mat-hint>
          </mat-form-field>
          <div>
            <button style="margin-top: 7px; margin-left: 10px;" mat-stroked-button [disabled]="false" type="button" (click)="addField()" [disabled]="!(newField.key && newField.label)">+ ADD</button>
          </div>
        </div>
        <div *ngIf="selectedFields.length > 0">
          <ngx-datatable class="material"
                         [columnMode]="'flex'"
                         [headerHeight]="40"
                         [footerHeight]="40"
                         [rowHeight]="50"
                         [rows]='selectedFields'>
            <ngx-datatable-column name="Key" [flexGrow]="2">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.key}}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="Label" [flexGrow]="4">
              <ng-template let-row="row" ngx-datatable-cell-template>
                {{row.label}}
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column name="" [flexGrow]="1">
              <ng-template let-row="row" ngx-datatable-cell-template>
                <button mat-icon-button (click)="removeField(row.key)">
                  <mat-icon>close</mat-icon>
                </button>
              </ng-template>
            </ngx-datatable-column>
          </ngx-datatable>
        </div>
        <div fxLayout="column">
          <mat-slide-toggle
            (change)="enableResetPasswordConfirmIdentity($event)"
            [checked]="isResetPasswordConfirmIdentityEnabled()" [disabled]="readonly">
            Allow confirm user identity
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">Use the user email as search criteria for forgot password form and fallback to custom form if multiple users are found.</mat-hint>
        </div>
      </div>
    </div>

    <div class="gv-form-section">
      <div class="gv-form-section-title">
        <h5>Bot Detection</h5>
        <mat-divider></mat-divider>
      </div>
      <div>
        <div fxLayout="column">
          <mat-slide-toggle
            (change)="enableBotDetection($event)"
            [checked]="isBotDetectionEnabled()" [disabled]="readonly || !hasBotDetectionPlugins()">
            Protect pages against bots
          </mat-slide-toggle>
          <mat-hint style="font-size: 75%;">Enable protection against bots on Sign-In, Sign-Up and Forgot Password pages.</mat-hint>
        </div>
        <div fxLayout="column" style="margin-top: 10px;">
          <mat-form-field appearance="outline">
            <mat-select placeholder="Bot detection plugin" name="botDetectionPlugin" [disabled]="readonly || !hasBotDetectionPlugins()" [(ngModel)]="accountSettings.botDetectionPlugin" (ngModelChange)="updateModel()">
              <mat-option *ngFor="let botDetectionPlugin of botDetectionPlugins" [value]="botDetectionPlugin.id">{{botDetectionPlugin.name}}</mat-option>
            </mat-select>
            <mat-hint>The bot detection plugin that will be used. If you made custom template, please look at the BotDetection configuration form to get code snippets to include into your pages</mat-hint>
          </mat-form-field>
        </div>
      </div>
    </div>
  </div>

  <div fxLayout="row" *ngIf="!readonly">
    <button mat-raised-button color="primary" [disabled]="(!formChanged || !formIsValid())" type="submit">SAVE</button>
  </div>
</form>
